<template>
    <div class="home-page">
        <Navigator :mode="'dark'" />
        <div class="body column">
            <StoreInfo />

            <div class="menu row">
                <MenuSlideBar
                    v-model="currentCategory"
                    @change="changeCategory"
                />
                <MenuView @change="changeCategory" />
            </div>
        </div>
        <Cart />
    </div>
</template>

<script>
import Navigator from "@/components/common/navigator/index";
import StoreInfo from "./components/storeInfo/index";
import MenuSlideBar from "./components/menuSlideBar/index";
import MenuView from "./components/menuView/index";
import Cart from "./components/cart/index";
export default {
    name: "home",
    components: {
        Navigator,
        StoreInfo,
        MenuSlideBar,
        MenuView,
        Cart
    },
    data() {
        return {
            currentCategory: ""
        };
    },

    methods: {
        changeCategory(item) {
            const { id } = item;
            this.currentCategory = id;
        }
    },
    created() {
        console.log("getDeviceId", this.$reporter.getDeviceId());
    }
};
</script>


<style lang="less">
.home-page {
    font-size: 30px;
    font-weight: normal;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding-bottom: 210px;

    > .body {
        width: 100%;
        height: 100%;

        .menu {
            flex: 1 1 auto;
            overflow: hidden;
        }
    }
}
</style>